<template>
    <div class="fullPage">
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.name}}</span> / <span>{{ui.title.localName}}</span>
            </div>
            <div class="filter"></div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <el-table
                :data="rowDatas"
                style="width: 100%"
                :height="ui.tabHeight"
            >
                <el-table-column
                    v-for = "(col, colIndex) in ui.tabCols"
                    :key="colIndex"       
                    :prop="col"             
                    :label="col"
                    
                ></el-table-column>
                <el-table-column
                    fixed="right"
                    label="Action"
                    width="80">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="showDlg(scope.row)"
                        type="text" >
                            <i class="fa fa-edit"></i> edit
                        </el-button> 
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :title="ui.title.name + ' / '+ ui.title.localName"
            :visible.sync="dlg.show"
            width="800px"
            >
            
                <div class="formEditPan">

                    <el-row :gutter="10">
                        <el-col 
                            :span="12"
                            v-for="(col , colInd) in ui.tabCols"
                            :key="colInd"
                        >
                            <div 
                                class="editRow"
                            >
                                <div class="lab" style="width:130px">{{col}}</div>
                                <div class="edit">
                                    <el-input v-model="dlg.info[col]"></el-input>
                                </div>
                            </div>  
                        </el-col>
                    </el-row>
 
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                me.init().then(_=>{
                    me.refresh();
                })
            }
            catch(er){
                console.log(er)
            }
        },
        data() {
            return {
                sqls:{
                    path:"squ/reg/delegation/",
                    getItems:"getItems" ,
                    new:"new",
                    update:"update"
                },
                ui:{
                    title: {
                        icon:"fa fa-flag" ,
                        name:"Delegation" ,
                        localName:"代表团"
                    },
                    tabHeight:200,
                    tabCols:[
                        'order','code','name','continent','countryOrRegion','localLongName','localName','localShortName','longName','medalCount','shortName','tVLongName','tVShortName'
                    ]
                },
                rowDatas:[],
                dlg:{
                    show: false,
                    info:{}
                } 
            };
        },
        methods: {
            init() {
                var me = this;
                return new Promise((success, faild)=>{
                    try{
                        me.$nextTick().then(_=>{
                            var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight;
                            me.ui.tabHeight = h; 
                            success();
                        });
                    }
                    catch(er){
                        console.log(er)
                        success();
                    }
                });
            },
            refresh() {
                var me = this;
                try{
                    me.dlg.show = false;
                    var key = me.sqls.path + me.sqls.getItems;
                    var ps={};
                    me.sys.query( key , ps ).then(res=>{
                        me.rowDatas = res;
                    })
                }
                catch(er){
                    console.log(er)
                }
            },
            showDlg(infoData) {
                var me = this;
                try{
                    me.dlg.info = me.getEditInfo(infoData);
                    me.dlg.show = true;
                }
                catch(er){
                    console.log(er)
                }
            },
            getEditInfo(infoData) {
                var me = this;
                var res ={};
                try{
                    res = infoData && infoData!=null? infoData: {
                        delegationId:0 ,
                        code:"" , 
                        continent:"" , 
                        countryOrRegion:"" , 
                        localLongName:"" , 
                        localName:"" , 
                        localShortName:"" , 
                        longName:"" , 
                        medalCount:"" , 
                        name:"" , 
                        order:0 , 
                        shortName:"" , 
                        tVLongName:"" , 
                        tVShortName:"" , 
                    };                    
                }
                catch(er){
                    console.log(er)
                }
                return res;
            },
            save( ) {
                var me = this;
                try{
                    var keyNew = me.sqls.path + me.sqls.new;
                    var keyUpdate = me.sqls.path + me.sqls.update;
                    var isEditFlag = me.dlg.info && me.dlg.info.delegationId && me.dlg.info.delegationId>0;
                    var key = isEditFlag? keyUpdate : keyNew;
                    var ps= me.dlg.info;
                    ps.order = parseInt(ps.order.toString());
                    me.sys.query( key , ps ).then(res=>{
                        if( res && res.rowcount && res.rowcount>0){
                            me.refresh();
                        }
                        else{
                            me.$message.error('save action faild!');
                        };
                    })
                    
                }
                catch(er){
                    console.log(er)
                }
            },
        },
        
    }
</script>


<style lang="less" scoped>
    @import url('../module.less');

</style>